<template>
  <div style="width:80%;height:55%;margin:5% auto;">
        <div id="main" style="width:100%;height:100%;"></div>
  </div>
</template>
<script>
    import echarts from 'echarts'
    export default{
        name: 'datadrawparam',
        props:['successOrder','cancelOrder','revokeOrder','auditOrder','refuseOrder','orderTotle'],
        data(){
            return{
                charts: '',
                opinion:['通过单量','取消单量','撤销订单','审核中订单','否决订单'],
                opinionData:[
                    {value:this.successOrder, name:'通过单量'},
                    {value:this.cancelOrder, name:'取消单量'},
                    {value:this.revokeOrder, name:'撤销订单'},
                    {value:this.auditOrder, name:'审核中订单'},
                    {value:this.refuseOrder, name:'否决订单'}
                ]
            }
        },
        methods: {
            drawPie(id){
               this.charts = echarts.init(document.getElementById(id))
               this.charts.setOption({
                 tooltip: {
                   trigger: 'item',
                   formatter: '{a}<br/>{b}:{c} ({d}%)'
                 },
                 legend: {
                   orient: 'vertical',
                   x: 'left',
                   data:this.opinion,
                   itemHeight:20,
                   itemWidth:20,
                   height:60,
                   align:'auto'
                 },
                 color:['#f5312a','#3e80ec', '#F99F0C', '#B9EF76', '#5FABDA','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                 series: [
                   {
                     name:'订单状态',
                     type:'pie',
                     radius:['40%','60%'],
                     avoidLabelOverlap: false,
                     label: {
                       normal: {
                         show: false,
                         position: 'center'
                       },
                       emphasis: {
                         show: true,
                         textStyle: {
                           fontSize: '30',  
                           fontWeight: 'blod'
                         }
                       }
                     },
                     labelLine: {
                       normal: {
                         show: false
                       }
                     },
                     data:this.opinionData
                   }
                 ]
               })
            },
            changeDrawPie(){
              this.opinionData=[
                {value:this.successOrder, name:'通过单量'},
                {value:this.cancelOrder, name:'取消单量'},
                {value:this.revokeOrder, name:'撤销订单'},
                {value:this.auditOrder, name:'审核中订单'},
                {value:this.refuseOrder, name:'否决订单'}
              ]
              this.drawPie('main')
            }
        },
        mounted(){
          this.$nextTick(function() {
            this.drawPie('main')
          })
        },
        watch:{
          "orderTotle"(cur,old){
            this.changeDrawPie();
          }
        }
    }
</script>